<script setup lang="ts">
const { onDragStart } = useDragAndDrop();
const tags = ref<[string, string, string]>(["开始", "知识点", "总结"]);
const toEdit = ref([false, false, false]);

const nodePanel = ref<HTMLDivElement>();
onClickOutside(nodePanel, () => {
  toEdit.value = [false, false, false];
});
</script>

<template>
  <!-- 各种节点类型 -->
  <aside class="ml-4 max-w-[200px] absolute p-2 vf-aside">
    <!-- <div class="description text-center text-xl py-2">
      添加面板
    </div> -->

    <div
      ref="nodePanel"
      class="nodes flex flex-col justify-center items-center w-full"
    >
      <!-- TODO: use v-for -->
      <div
        class="vue-flow__node-input !w-[100px] hover:cursor-pointer m-2 hover-node-style *:text-sm flex justify-center items-center"
        :draggable="true"
        @dragstart="onDragStart($event, 'input', tags[0])"
        @dblclick="toEdit[0] = !toEdit[0]"
      >
        <UInput
          v-if="toEdit[0]"
          v-model="tags[0]"
          type="text"
          class="w-[80px]"
        />
        <p v-else>
          {{ tags[0] }}
        </p>
      </div>

      <div
        class="vue-flow__node-default !w-[100px] hover:cursor-pointer m-2 hover-node-style *:text-sm flex justify-center items-center"
        :draggable="true"
        @dragstart="onDragStart($event, 'default', tags[1])"
        @dblclick="toEdit[1] = !toEdit[1]"
      >
        <UInput
          v-if="toEdit[1]"
          v-model="tags[1]"
          type="text"
          class="w-[80px]"
        />
        <p v-else>
          {{ tags[1] }}
        </p>
      </div>

      <div
        class="vue-flow__node-output !w-[100px] hover:cursor-pointer m-2 hover-node-style *:text-sm flex justify-center items-center"
        :draggable="true"
        @dragstart="onDragStart($event, 'output', tags[2])"
        @dblclick="toEdit[2] = !toEdit[2]"
      >
        <UInput
          v-if="toEdit[2]"
          v-model="tags[2]"
          type="text"
          class="w-[80px]"
        />
        <p v-else>
          {{ tags[2] }}
        </p>
      </div>
      <slot name="mini_map" />
    </div>
  </aside>
</template>

<style scoped lang="postcss">
.hover-node-style {
  @apply hover:outline-slate-600 hover:outline hover:outline-1 hover:scale-95 transition-transform duration-200 ease-in-out;
}

.nodes > * {
  @apply cursor-grab font-medium; /* hover:shadow-[0px_0px_3px_1px_rgba[180_180_180_0.5]] */
}

.vf-aside {
  @apply text-white font-bold border-r-[1px] border-r-[solid] border-r-[#eee] px-[4px] py-[8px] text-[12px] bg-[#10b981d9] shadow-[0_5px_10px_#0000004d];
}
</style>
